<template>
  <div class="product-detail">
    <SimpleHeader title="商品详情"></SimpleHeader>
    <FixedPad height="40px"></FixedPad>
    <div class="carousel">
      <img :src="localIP + detail.goodsCarousel" alt="" />
    </div>
    <div class="goods-intro">{{ detail.goodsIntro }}</div>
    <div class="diliver">免邮费 顺丰直达</div>
    <div class="price">￥{{ detail.sellingPrice }}</div>
    <ul class="detail-tabs">
      <li>概述</li>
      <li>参数</li>
      <li>参数服务</li>
      <li>常见问题</li>
    </ul>
    <div class="detail-content" v-html="detail.goodsDetailContent"></div>
    <FixedPad></FixedPad>
    <CartBar @addCart="addCart" @buyNow="buyNow"></CartBar>
  </div>
</template>

<script>
import SimpleHeader from '@/components/SimpleHeader'
import FixedPad from '@/components/FixedPad'
import CartBar from '@/components/CartBar'
import { getDetail } from '@/api/goods'
import { localIP } from '@/utils'
import { mapActions } from 'vuex'
export default {
  name: 'Detail',
  components: {
    SimpleHeader,
    FixedPad,
    CartBar
  },
  data() {
    return {
      detail: {},
      localIP
    }
  },
  mounted() {
    const query = this.$route.query
    if (query && query.goodsId) {
      this.getGoodsDetail(query.goodsId)
    }
  },
  methods: {
    ...mapActions({
      addGoodsToCartApi: 'cart/addGoodsToCartApi',
      getCartListApi: 'cart/getCartListApi'
    }),
    // 获取商品详情
    async getGoodsDetail(goodsId) {
      const res = await getDetail(goodsId)
      if (res && res.resultCode === 200) {
        this.detail = res.data
        console.log(this.detail)
      }
    },

    // 添加到购物车
    async addCart() {
      const { goodsId } = this.detail
      const res = await this.addGoodsToCartApi({ goodsId, goodsCount: 1 })
      if (res) {
        this.getCartListApi()
      }
    },

    // 现在购买
    buyNow() {}
  }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.product-detail {
  padding: 0 15px;
  .carousel {
    display: flex;
    justify-content: center;
    > img {
      width: 90%;
    }
  }
  .goods-intro {
    font-size: 18px;
  }
  .diliver {
    padding: 8px 0;
    font-size: 14px;
    color: grey;
  }
  .price {
    padding: 5px 0 15px;
    color: #f63615;
    font-size: 18px;
  }
  .detail-tabs {
    display: flex;
    justify-content: space-around;
    > li {
      flex: 1;
      text-align: center;
      font-size: 14px;
      border-right: 1px solid black;
      &:last-child {
        border-right: none;
      }
    }
  }
  .detail-content {
    padding: 10px 0;
    font-size: 14px;
    /deep/ img {
      width: 100%;
    }
  }
}
</style>
